import React, { useEffect, useState, useRef } from 'react'
import styles from './index.less'
import { useForm } from 'react-hook-form';
import { Toast } from 'antd-mobile'
import { useDispatch, useHistory } from 'dva'
import { useIntl } from 'umi';
function Index() {
  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm();
  const history = useHistory()
  const dispatch = useDispatch()
  let phoneReg = /^1[0-9]{10}$/
  const [remark, setRemark] = useState('')
  const [suggestion, setSuggestion] = useState('')


  // useEffect(() => {
  //   console.log(errors, 'errors')
  // }, [errors])

  function onSubmit(data) {
    // console.log(data, 'data')

    if (!data.exhibitorName) {
      Toast.fail(intl.formatMessage({ id: 'PLEASE_ENTER_THE_COMPANY_NAME' }), 2)
      return
    }
    if (!data.contactPerson) {
      Toast.fail(intl.formatMessage({ id: 'PLEASE_ENTER_CONTACTS' }), 2)
      return
    }
    if (!data.phone) {
      Toast.fail(intl.formatMessage({ id: 'PLEASE_ENTER_CONTACTS' }), 2)
      return
    }
    if (!data.isKeep) {
      Toast.fail(intl.formatMessage({ id: 'SELECT_WHETHER_TO_RETAIN' }), 2)
      return
    }
    if (!data.expectArea) {
      Toast.fail(intl.formatMessage({ id: 'PLEASE_ENTER_DESIRED_AREA' }), 2)
      return
    }
    if (!data.isKeepPrev) {
      Toast.fail(intl.formatMessage({ id: 'PLEASE_CHOOSE_WHETHER' }))
      return
    }
    if (!phoneReg.test(data.phone)) {
      Toast.fail(intl.formatMessage({ id: 'PLEASE_ENTER_THE_CORRECT_PHONE_NUMBER' }), 2)
      return
    }
    // if (!remark) {
    //   Toast.fail('请输入您的建议', 2)
    //   return
    // }


    dispatch({
      type: 'index/apiPostReceipt',
      payload: {
        ...data,
        remark,
        suggestion
      },
      callback: (status) => {
        if (status) {
          setValue('exhibitorName', '')
          setValue('contactPerson', '')
          setValue('phone', '')
          setValue('isKeep', '')
          setValue('expectArea', '')
          setValue('isKeepPrev', '')
        }
      }
    })
  }

  function nextPage() {
    history.push('/scheduled2')
  }
  const intl = useIntl();
  return (
    <div className={styles.page}>
      <p className={styles.title}>
        2022年”第三十一届中国国际自行车展览会“
      <br />
        预报名邀请函
      </p>

      <p className={styles.text}>
        尊敬的展商：
      </p>
      <p className={styles.text}>
        您好！
      </p>
      <p className={styles.text}>
        感谢贵司一直以来对中国国际自行车展览会（以下简称“中国展”）的鼎力支持与关注!
      </p>
      <p className={styles.text}>
        2022年，为了更好的服务于企业、尽量满足企业参展的需求，诚挚邀请贵司预报名第三十一届中国展。
      </p>
      <p className={styles.text}>
        我们将按照“分类布局、统筹安排”的原则，为预报名企业优先安排展位。预报名企业可按每3000元/9㎡支付展位定金，享受展位费总额2%的优惠。（定金收取细则详见附件）
      </p>
      <p className={styles.text} style={{ textAlign: 'center', marginTop: 20 }}> 预报名回执</p>
      <form onSubmit={handleSubmit(onSubmit)}>
        <table border="1">
          <tbody>
            <tr>
              <td className={styles.label}>{intl.formatMessage({ id: 'COMPANY_NAME' })}</td>
              <td><input {...register('exhibitorName', { required: false })} /></td>
            </tr>
            <tr>
              <td className={styles.label}>{intl.formatMessage({ id: 'THE_CONTACT' })}</td>
              <td>
                <input {...register('contactPerson', { required: false })} />
                {/* {errors.name && <p>请输入联系人。</p>} */}
              </td>
            </tr>
            <tr>
              <td className={styles.label}>{intl.formatMessage({ id: 'MOBILE_PHONE_NUMBER' })}</td>
              <td><input　type="number" {...register('phone', { required: false })}  /></td>
            </tr>
            <tr>
              <td className={styles.label}>{intl.formatMessage({ id: 'KEEP_IN_SITU' })}</td>
              <td>
                <div className={styles.select}>
                  <div>
                    <div>
                      <label>{intl.formatMessage({ id: 'YES' })}</label>
                      <input value="yes" {...register('isKeep', { required: false })} type="radio" />
                    </div>
                    <div>
                      <label value="no">{intl.formatMessage({ id: 'NO' })}</label>
                      <input {...register('isKeep', { required: false })} type="radio" />
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td className={styles.label}>{intl.formatMessage({ id: 'Expect_area' })}</td>
              <td><input　type="number" {...register('expectArea', { required: false })} placeholder="请输入您所需的面积，9 m²起"  /></td>
            </tr>
            <tr>
              <td className={styles.label}>{intl.formatMessage({ id: 'USE_THE_REGISTRATION_INFORMATION_OF_THE_LAST_EXHIBITION' })}</td>
              <td>
                <div className={styles.select}>
                  <div>
                    <div>
                      <label>{intl.formatMessage({ id: 'YES' })}</label>
                      <input value="yes" {...register('isKeepPrev', { required: false })} type="radio" />
                    </div>
                    <div>
                      <label value="no">{intl.formatMessage({ id: 'NO' })}</label>
                      <input {...register('isKeepPrev', { required: false })} type="radio" />
                    </div>
                  </div>
                </div>
              </td>
            </tr>

          </tbody>

        </table>
        {/* <button type="submit" className={styles.buttom} onClick={onSubmit}>
          保存回执单
        </button> */}

      </form>
      {/* <div className={styles.remarks} style={{display:'flex',justifyContent:'flex-start'}}>
    
      </div> */}
      <p className={styles.text} style={{ marginTop: 20, display: 'inline-block', width: 50 }}>
      {intl.formatMessage({ id: 'REMARKS' })}
      </p>
      <input className={styles.opinion} value={remark} onChange={(e) => {
        setRemark(e.target.value)
      }}></input>


      <p className={styles.text} style={{ marginTop: 20 }}>
        为了提升我们展会的服务质量，请您对改善2022展会的各项工作提出宝贵意见：
      </p>


      <p>

      </p>
      <p className={styles.text} style={{ color: '#0000f8' }} onClick={
        () => {
          history.push('/scheduled2')
        }
      }>

      </p>
      <input className={styles.opinion} value={suggestion} onChange={(e) => {
        setSuggestion(e.target.value)
      }}></input>
      <div style={{ width: "100%", textAlign: "right" }}>
        <button className={styles.buttom} onClick={handleSubmit(onSubmit)}  >
        {intl.formatMessage({ id: 'SUBMIT' })}
        </button>
      </div>

      <p className={styles.text}>
      {intl.formatMessage({ id: 'AGAIN_IN_2022' })}：
      </p>



      <p style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <img src={require('./img.png')} className={styles.img}></img>
      </p>
      <p className={styles.next} onClick={nextPage}  >
      {intl.formatMessage({ id: 'ATTACHMENT_NOTICE_OF_COLLECTING_BOOTH_DEPOSIT' })}
        </p>

    </div>
  )
}

export default Index
